<template>
	<view>
		<view class="page-head ptb25 plr30 bg-ghostWhite">
			<view class="search-box bg-white flex-box">
				<input class="flex-1 fs24 col-3" @focus="focus" @blur="blur" type="text" confirm-type="search" @confirm="search" :value="q" placeholder="输入搜索关键词" placeholder-class="col-9" />
				<image src="/static/icon/icon_search.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="container plr30" style="padding-top: 116rpx;">
			<view class="pt40" v-if="!showStatus">
				<view class="fs30 col-3 mb25">搜索历史</view>
				<view class="flex flex-align-start flex-wrap">
					<view @click="clickHistory(item)" class="his-item" v-for="(item,index) in search_history">{{item}}</view>
					<!-- <view class="his-item">培训课程</view>
					<view class="his-item">精英课</view> -->
				</view>
			</view>
			<!--  -->
			<view class="course-list2" v-if="showStatus">
				<view @click="navication(item.id,item.type)" class="nav-course flex-box ptb30"  v-for="(item,index) in course">
					<!-- <view class="time-long">00:08:00</view> -->
					<image class="img-course mr20" :src="item.thumb_image" mode="aspectFill"></image>
					<view class="flex-1">
						<view class="m-ellipsis fs26 col-0 mb10">{{item.name}}</view>
						<view class="m-ellipsis fs22 col-6 mb30">{{item.description}}</view>
						<view class="flex-box">
							<image class="icon1 mr10" src="/static/icon/icon_tv.png" mode="aspectFit"></image>
							<view class="flex-1 fs22 col-9">{{item.total_num}}人学习过</view>
							<view class="fs20 col-yellow fwb" v-if="item.is_charge == 0">免费</view>
							<view class="g-price1 fwb" v-else>{{item.salesprice}}</view>
						</view>
					</view>
				</view>
				<view class="g-btn3-wrap">
					<view class="g-btn3"  :class="{nomore: courseMore.nomore == true}" @click="fetch()">{{courseMore.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const util = require('../../xiluedu/util.js');
export default {
	data() {
		return {
			showStatus:false,
			search_history:[],
			q:'',
			course:[],
			courseMore:{page:1}
		};
	},
	onLoad(){
		this.search_history = this.getHistorySearch();
	},
	methods: {
		search(e){
			let q = e.detail.value;
			this.q = q;
			if(q.trim() == ''){
				uni.showToast("搜索不得为空");
				return false;
			}
			//搜索列表存缓存
			this.setHistorySearch(q);
			this.refresh();
			this.showStatus = true;
		},
		focus(){
			this.showStatus = false;
		},
		blur(){
			this.showStatus = true;
		},
		//添加缓存搜索
		setHistorySearch(q){
			let search_history = this.getHistorySearch();
			let index = search_history.indexOf(q);
			if(index !== -1){
				search_history.splice(index,1);
			}
			search_history.unshift(q.toString());
			uni.setStorageSync('search_history',JSON.stringify(search_history));
			this.search_history = this.getHistorySearch();
		},
		//获取缓存搜索
		getHistorySearch(){
			let search_history = uni.getStorageSync('search_history') || '';
			if(search_history){
				search_history = JSON.parse(search_history);
			}else{
				search_history = [];
			}
			return search_history;
		},

		//历史搜索
		clickHistory(q){
			this.q = q;
			//搜索列表存缓存
			this.setHistorySearch(q);
			this.refresh();
			this.showStatus = true;
		},
		
		refresh(){
			this.course = [];
			this.courseMore = {page:1};
			this.fetch();
		},

		fetch() {	
			let q = this.q;
		    util.fetch(this, 'xiluedu.course/lists', {q:q,pagesize:10}, 'courseMore', 'course', 'data', data=>{
		      //this.setData({course: data});
		    })
		},
		navication(id, type) {
			if (type == 3) {
				// 文章
				uni.navigateTo({
					url: '../article_detail/article_detail?course_id=' + id
				});
			} else {
				uni.navigateTo({
					url: '../course_video_detail/course_video_detail?course_id=' + id
				});
			}
		},
	}
};
</script>

<style scoped>
.search-box {
	padding: 0 15rpx 0 30rpx;
	width: 690rpx;
	height: 66rpx;
	border-radius: 33rpx;
}
.search-box image {
	padding: 20rpx 15rpx;
	display: block;
	width: 52rpx;
	height: 62rpx;
}

.his-item {
	margin: 0 30rpx 30rpx 0;
	padding: 0 17rpx;
	height: 44rpx;
	border: 1rpx solid #e1e1e1;
	border-radius: 22rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #666666;
	line-height: 44rpx;
	text-align: center;
}
/*  */
.course-list2 .img-course {
	display: block;
	width: 280rpx;
	height: 160rpx;
	border-radius: 10rpx;
}
.course-list2 .nav-course + .nav-course{
	border-top: 1rpx solid var(--border)	;
}
</style>
